import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    TouchableOpacity,
    TextInput
} from 'react-native';
// import {Actions} from 'react-native-router-flux'
import Icon from 'react-native-vector-icons/Ionicons'; 
import Icons from 'react-native-vector-icons/FontAwesome'; 

class RemoveFolder extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            show: false
        }
    }
    _onPressAddFolder =()=>{
       this.setState({
           show: true
       })
    }
    _onPressRemoveFolder =() =>{
        alert('移动到此处');
    }
    _onPressAdd =() =>{
        this.setState((previousState)=>{
            return ({
            show: !previousState.show,
            text: 'Placeholder'
            })
        })
    }
    _onPressSubmit=() =>{
        alert('添加文件夹');
        this.setState({
            show: false
        })
    }
    render(){
        let addDialogView = this.state.show ?
        <View style={styles.dialog} >
          <View style={styles.dialogModal} >
            <TouchableOpacity style={{flex:1}} onPress={() => { this._onPressAdd() }}>
            </TouchableOpacity>
          </View>
          <View style={styles.dialogWrap}>
            <View>
                <View style={styles.dialogTitle}>
                    <Text>新建文件夹</Text>
                </View>
              <View style={styles.dialogContent}>
                <TextInput
                autoFocus={true}
                clearButtonMode={true}
                placeholder="输入文件夹名"
                        style={styles.addInput}
                        value={this.state.inputVal}
                    />
              </View>
              <View style={styles.dialogFooter}>
              <Text  style={styles.cancel} onPress={()=>{this._onPressAdd()}}>
                取消
                </Text>
                <Text  style={styles.submit} onPress={()=>{this._onPressSubmit()}}>
                确定
                </Text>
              </View>
            </View>
          </View>
        </View>:null
        return (
            <View style={styles.container}>
               <FlatList
                data={[
                {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期一的文件夹',Size: 0,Type: 1},
                {Hash: 'QmSasQaPRJ829Wuadq9fTKdGyU5SYbaEYhr2tT89qZiYVT', Name: '星期二的文件夹',Size: 2122,Type: 1},
                {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
                {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
                {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
                {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
                ]}
                renderItem={({item,index}) => <View style={styles.folderLi}>
                <Icons style={{color: '#ffd02f'}} name='folder' size={22}/>
                <View style={styles.info}>
                    <View>
                    <Text style={styles.name} numberOfLines={1} ellipsizeMode='tail'>{item.Name}</Text>
                    <Text style={styles.hash} numberOfLines={1} ellipsizeMode='tail'>hash:{item.Hash}</Text>
                    <Text style={styles.size}>大小：{item.Size}KB</Text>
                    </View>
                </View>
            </View>}
          />
          <View style={styles.removeBtn}>
            <TouchableOpacity style={styles.btnWrap} onPress={()=>{this._onPressAddFolder()}}>
                <Text  style={styles.btn} >
                新建文件夹
                </Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnWrap} onPress={()=>{this._onPressRemoveFolder()}}>
                <Text  style={styles.btn} >
                    移动到此处
                    </Text>
            </TouchableOpacity>
          </View>
          {addDialogView}
        </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        paddingTop: 15,
        justifyContent: 'space-between'
       },
      folderLi:{
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
        paddingBottom : 10
      },
      folderIcon: {
        height: 30,
        width: 30,
        marginRight: 10,
      },
      info:{
        flex: 1,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        marginLeft: 10,
        marginRight:10
      },
      name:{
        fontSize: 13,
        color: '#434343',
        fontWeight: 'bold',
      },
      hash:{
        fontSize: 12,
        color: '#858585'
      },
      size:{
        fontSize: 12,
        color: '#858585'
      },
      removeBtn:{
        height: 55,
        flexDirection: 'row',
        borderTopColor: '#ebebeb',
        borderTopWidth: 1,
        justifyContent: 'space-around'
      },
      btnWrap:{
        flex: 1  
      },
      btn:{
        height: 42,
        marginTop: 6,
        marginBottom: 6,
        marginLeft: 8,
        marginRight: 8,
        backgroundColor: '#f2f3f4',
        color: '#555555',
        lineHeight: 42,
        textAlign: 'center'
      },
      dialog:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 10
      },
      dialogModal:{
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 20
      },
      dialogWrap:{
        width: '80%',
        backgroundColor: '#fff',
        position: 'absolute',
        left: '10%',
        top: '30%',
        borderRadius: 4,
        backfaceVisibility: "hidden",
      
        fontSize: 14,
        color: '#606266',
        zIndex:50
      },
      dialogTitle:{
        padding: 10,
        color: '#303133',
        fontWeight:'bold',
        alignItems: 'center'
      },
      dialogContent:{
        paddingTop: 12,
        paddingLeft: 12,
        paddingRight: 12,
        paddingBottom: 20
      },
      dialogFooter:{
        borderTopColor:'#ebedf0',
        borderTopWidth: 1,
        height: 40,
        // padding: 10,
        flexDirection: 'row',
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center'
      },
      addInput:{
        height: 40, 
        borderColor: '#ebedf0',
        borderWidth: 1,
        borderRadius: 4,
        fontSize: 12,
        paddingLeft: 10,
        paddingRight: 10
      },
      cancel:{
        flex: 1,
        textAlign: 'center',
        paddingTop: 10,
        paddingBottom: 10,
      },
      submit:{
        flex: 1,
        paddingTop: 10,
        paddingBottom: 10,
        textAlign: 'center',
        color: '#1989fa'
      }

});

export default RemoveFolder;
